require(['config'],()=>{
    require(['pAjax','header','footer'],()=>{
        class Details{
            constructor(){
                this.details = document.querySelector('.details')
                this.pic1 = document.querySelector('.leftImg>img')                             
                // this.pic1 = document.querySelector('.picRight>img')          
                this.long_title = document.querySelector('.long_title')
                this.span = document.querySelector('.r_second>span')
                this.pic2 = document.querySelector('.rightImg>img')    
                this.add = document.querySelector('.r_fourth')    
                this.init()
            }
            init(){
                this.request()
                //放大镜            
                
            }
            getQueryStr(name){
                let str = location.search.slice(1)
                // console.log(str);
                let arr = str.split('=')
                let obj ={}
                obj[arr[0]] = arr[1]
                return obj[name]
            }
            request(){
                let id = this.getQueryStr('id') - 0
                if(!id){
                    location.href = '/index.html'
                    return false
                }else{
                    pAjax({url:'/api/goods.json'})
                    .then( data =>{
                    let res = JSON.parse(data)
                    // console.log(data);
                    res = res.slice(0, 20)
                    console.log(res);
                    let goods = res.find(item=>{return item.goods_id == id})
                    this.render(goods)
                })
                }
            }
           
            render(data){
                this.pic1.src= data.img_small_logo
                this.pic2.src= data.img_small_logo
                // this.pic1.src= data.img_big_logo
                this.span.innerHTML= data.price
                this.long_title.innerHTML = data.title
                this.details.innerHTML = data.goods_introduce   
            }
            
            
    }
        new Details()
        class Zoom{
            constructor(){
                //把获取元素当成对象的属性
                this.smallBox = document.querySelector('.leftImg')
                this.mask = document.querySelector('.leftImg>span')
                this.bigBox = document.querySelector('.rightImg')
                this.pic = document.querySelector('.rightImg>img')
                //调用初始化方法即可
                this.init()
            }
            init(){
                this.over()
                this.out()
                this.move()
            }
            over(){
                this.smallBox.onmouseover = ()=>{
                    this.mask.style.display = 'block'
                    this.bigBox.style.display = 'block'
                }   
            }
            out(){
                this.smallBox.onmouseout = ()=>{
                    this.mask.style.display = 'none'
                    this.bigBox.style.display = 'none'
                }
            }
            move(){
                this.smallBox.onmousemove = (e)=>{
                    //获取坐标
                    let x = e.clientX - this.smallBox.offsetParent.offsetLeft - this.mask.offsetWidth/2
                    let y = e.clientY - this.smallBox.offsetParent.offsetTop - this.mask.offsetHeight/2

                    //边界值判断
                    if(x<=0){
                        x = 0
                    }else if(x>=this.smallBox.offsetWidth - this.mask.offsetWidth){
                        x = this.smallBox.offsetWidth - this.mask.offsetWidth
                    }
                    if(y<=0){
                        y = 0
                    }else if(y>=this.smallBox.offsetHeight - this.mask.offsetHeight){
                        y = this.smallBox.offsetHeight - this.mask.offsetHeight
                    }

                    //进行赋值操作
                    this.mask.style.left = x + 'px'
                    this.mask.style.top = y + 'px'

                    //进行计算比例
                    let w =  x / (this.smallBox.offsetWidth - this.mask.offsetWidth)
                    let h =  y / (this.smallBox.offsetHeight - this.mask.offsetHeight)
                    
                    //进行赋值操作
                    this.pic.style.left = -w * (this.pic.offsetWidth - this.bigBox.offsetWidth) + 'px'
                    this.pic.style.top = -h * (this.pic.offsetHeight - this.bigBox.offsetHeight) + 'px'
                }
            }
        }
        new Zoom()
    })
})